<template>
	<view class="content padding">
		<view class="header">
			<swiper class="swiper" circular autoplay indicator-dots indicator-active-color="#F3271C">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="" v-if="item.type==1"></image>
					<video src="item.url" v-if="item.type==2"></video>
				</swiper-item>
			</swiper>
		</view>
		<view class="margin_top6 padding ffffff color_six text_five">
			{{shop_apply_intr}}
		</view>
		<view class="margin_top padding ffffff flexbetween">
			<view class="color_ling text_w margin_right6">姓名</view>
			<input class="text_a flex1 textright" type="text" placeholder="请输入姓名"
				placeholder-style="font-size: 30rpx;font-weight: 500;color: #999999;" v-model="real_name">
		</view>
		<view class="margin_top padding ffffff flexbetween">
			<view class="color_ling text_w margin_right6">联系电话</view>
			<input class="text_a flex1 textright" type="number" placeholder="请输入联系电话"
				placeholder-style="font-size: 30rpx;font-weight: 500;color: #999999;" v-model="shop_phone">
		</view>
		<view class="margin_top padding ffffff flexbetween">
			<view class="color_ling text_w margin_right6">是否是残疾人</view>
			<view class="flexleft">
				<view :class="is_disability==0?'margin_right3 select':'margin_right3 noSelect'"
					@click="is_disability=0">否</view>
				<view :class="is_disability==1?'select':'noSelect'" @click="is_disability=1">是</view>
			</view>
		</view>
		<!-- 上传材料 -->
		<view class="margin_top padding ffffff" v-show="is_disability==1">
			<view class="color_san text_w">上传材料</view>
			<view class="flexleft flex_wrap">
				<view class="item_image_box margin_top" v-for="(item,index) in orther_images_arr" :key="index">
					<view class="item_image radius">
						<image :src="item" mode="widthFix"></image>
						<view class="deletimg" @click="deleimage(index,'orther_images_arr')"></view>
					</view>
				</view>
				<!-- 图片盒子 -->
				<view class="item_image_box margin_top" @click="uploadImg(3,'orther_images_arr')"
					v-if="orther_images_arr.length<3">
					<view class="item_image radius">
						<image src="/static/image/home/noimage.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="margin_top6" style="margin-bottom: 120rpx;">
			<!-- 身份证 -->
			<view class="flexbetween">
				<view class="card" @click="uploadImg(1,'id_card_zimage_text')">
					<image v-if="!id_card_zimage_text" src="/static/image/mine/cardTx.png" mode="widthFix"></image>
					<image v-if="id_card_zimage_text" :src="id_card_zimage_text" mode="widthFix"></image>
				</view>
				<view class="card" @click="uploadImg(1,'id_card_fimage_text')">
					<image v-if="!id_card_fimage_text" src="/static/image/mine/cardGh.png" mode="widthFix"></image>
					<image v-if="id_card_fimage_text" :src="id_card_fimage_text" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer ffffff padding">
			<view class="footerButton" @click="submit">提交审核</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import upFile from "@/utils/upload.js"
	export default {
		data() {
			return {
				is_disability: 0,
				id_card_zimage: "", //身份证正面
				id_card_zimage_text: "", //身份证正面
				id_card_fimage: "", //身份反面
				id_card_fimage_text: "", //身份证正面
				orther_images: [], //资质证书
				orther_images_arr: [],
				real_name: "", //姓名
				shop_phone: "", //联系电话
			}
		},
		computed: {
			shop_apply_intr() {
				return this.$store.state.shop_apply_intr
			},
			swiperList() {
				return this.$store.state.shop_apply_images
			},
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				httpRequest.request('/api/shop/apply_pre', 'GET', {}).then(res => {
					if (res.data.info) {
						let data = res.data.info
						let arr = data.idcard_images.split(",")
						this.id_card_zimage = arr[0]
						this.id_card_zimage_text = data.idcard_images_arr[0]
						this.id_card_fimage = arr[1]
						this.id_card_fimage_text = data.idcard_images_arr[1]
						this.real_name = data.real_name
						this.shop_phone = data.shop_phone
						this.is_disability = data.is_disability
						this.orther_images_arr = data.orther_images_arr.length ? data.orther_images_arr : []
						this.orther_images = data.orther_images_arr.length ? data.orther_images : []
					}
				})
			},
			deleimage(index, value) {
				var that = this;
				if (value == "orther_images_arr") {
					that.orther_images_arr.splice(index, 1)
					that.orther_images.splice(index, 1)
				} else if (value == "id_card_zimage_text") {
					that.id_card_zimage = ""
					that.id_card_zimage_text = ""
				} else if (value == "id_card_fimage_text") {
					that.id_card_fimage = ""
					that.id_card_fimage_text = ""
				}
			},
			uploadImg(length, value) {
				let that = this;
				if (value == "id_card_zimage_text") {
					upFile.chooseImage({
						count: 1
					}, function(res) {
						that.id_card_zimage = res.url
						that.id_card_zimage_text = res.fullurl
						console.log(res,"id_card_zimage_text")
					})
				} else if (value == "id_card_fimage_text") {
					upFile.chooseImage({
						count: 1
					}, function(res) {
						that.id_card_fimage = res.url
						that.id_card_fimage_text = res.fullurl
						console.log(res,"id_card_fimage_text")
					})
				} else {
					var martial_images = that.orther_images
					var martial_images_arr = that.orther_images_arr
					if (martial_images.length >= length) {
						httpRequest.toast('最多上传' + length + '张图片');
						return;
					}
					upFile.chooseImage({
						count: length - martial_images.length
					}, function(res) {
						martial_images_arr.push(res.fullurl)
						martial_images.push(res.url)
						that.orther_images_arr = martial_images_arr
						that.orther_images = martial_images
					})
				}
			},
			submit() {
				if (this.real_name == "") {
					httpRequest.toast('请输入姓名');
					return;
				}
				if (this.shop_phone == "") {
					httpRequest.toast('请输入联系电话');
					return;
				}
				let mobile = this.shop_phone;
				if (!mobile.match(/^1\d{10}$/)) {
					httpRequest.toast("请输入有效的联系电话");
					return false;
				}
				if (this.is_disability == 1 && this.orther_images_arr.length == 0) {
					httpRequest.toast('请上传材料');
					return;
				}
				if (this.id_card_zimage == "") {
					httpRequest.toast('请上传身份证正面照片');
					return;
				}
				if (this.id_card_fimage == "") {
					httpRequest.toast('请上传身份证反面照片');
					return;
				}
				let idcard = [this.id_card_zimage, this.id_card_fimage]
				console.log(this.orther_images,222);
				httpRequest.request('/api/shop/apply', 'POST', {
					real_name: this.real_name,
					shop_phone: this.shop_phone,
					is_disability: this.is_disability,
					idcard_images: idcard.join(","),
					orther_images: this.orther_images_arr.join(",")
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg)
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					} else {
						httpRequest.toast(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 380rpx;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		overflow: hidden;

		.swiper {
			height: 100%;
		}

		image {
			width: 100%;
			height: 100%;
		}

		video {
			width: 100%;
			height: 100%;
		}
	}

	.select {
		width: 138rpx;
		height: 69rpx;
		line-height: 69rpx;
		text-align: center;
		background: rgba(243, 39, 28, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #F3271C;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}

	.noSelect {
		width: 138rpx;
		height: 69rpx;
		line-height: 69rpx;
		text-align: center;
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 198rpx;
		height: 198rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.card {
		width: 48%;
		height: 296rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>